<template>
    <view class="content">
        <view class="box">
			<view class="item">
				<view>产品名称</view>
				<view class="i-right">
					<input v-model="product.name" type="text" placeholder="请输入" class="inp">
				</view>
			</view>
            
			<view class="item">
				<view>品牌</view>
				<view class="i-right item-right" @click="show_7 = true">
					<!-- <input type="text"  placeholder="请选择品牌" class="inp" disabled> -->
                    
                    <view class="text" v-if="!product.brand_id">请选择品牌</view>
                    <view class="" v-else>{{product.brandName}}</view>
					<u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-5"></u-icon>
				</view>
			</view>
            
			<view class="item">
				<view>运费模板</view>
				<!-- 件、重量、体积 -->
				<view class="i-right item-right" @click="show_8 = true">
					<!-- <input type="text"  placeholder="请选择品牌" class="inp" disabled> -->
                    <view class="text" v-if="!product.freight_id">请选择模板</view>
                    <view class="" v-else>{{product.freightName}}</view>
					<u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-5"></u-icon>
				</view>
			</view>
            
            
            
			<view class="item">
				<view>包装</view>
				<!-- 运费模板 选择重量时 必填 -->
				<view class="i-right">
					<input v-model="product.packages" type="text" placeholder="请输入" class="inp">
				</view>
			</view>
			<view class="item">
				<view>型号</view>
				<view class="i-right">
					<input v-model="product.model" type="text" placeholder="请输入" class="inp">
				</view>
			</view>
            
            <view class="item">
            	<view>重量</view>
            	<view class="i-right">
            		<input v-model="product.weight" type="text" placeholder="请输入" class="inp">
            	</view>
            </view>
            
		</view>
		<view class="btn" @click="insert_goods">确认添加</view>
        
        <template v-if="show_7">
        	<u-select v-model="show_7" mode="single-column" :list="select.brand" label-name="name" value-name="id" 
        		@confirm="confirm($event, 7)"></u-select>
        </template>
        <template v-if="show_8">
        	<u-select v-model="show_8" mode="single-column" :list="select.freight" label-name="name" value-name="id" 
        		@confirm="confirm($event, 8)"></u-select>
        </template>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                line_id:'',
                type_id:'',
                product:{
                   line_id:'',//线路id
                   type_id:'',//货物类型id
                   name:'',//名称
                   brand_id:'',//品牌id
                   brandName:'',//品牌名称
                   
                   model:'',//型号
                   packages:'',//包装 重量模板必填
                   weight:'',//重量 重量模板必填
                   freight_id:'',//运费id
                   freightName:'',//运费名称
                   freightType:'',//运费名称
                   freightPrice:''//运费金额
                },
                select:{},
                show_7:false,
                show_8:false
            };
        },
        onLoad(option) {
            this.product.line_id = option.line_id;
            this.product.type_id = option.type_id;
            
            this.brand_freight();
        },
        methods: {
            confirm(e,index){
                
                // product:{
                //    line_id:'',//线路id
                //    type_id:'',//货物类型id
                //    name:'',//名称
                //    brand_id:'',//品牌id
                //    brandName:'',//品牌名称
                   
                //    model:'',//型号
                //    packages:'',//包装 重量模板必填
                //    weight:'',//重量 重量模板必填
                //    freight_id:'',//运费id
                //    freightName:'',//运费名称
                //    freightType:'',//运费名称
                // },
                
                
                if(index==7){
                    this.product.brand_id = e[0].value
                    this.product.brandName =  e[0].label
                }else if(index==8){
                    this.product.freight_id = e[0].value
                    this.product.freightName =  e[0].label
                    this.select.freight.forEach(item=>{
                        console.log(item)
                        if(item.id==this.product.freight_id){
                            this.product.freightType = item.type
                            this.product.freightPrice = item.price
                        }
                    })
                    
                }
            },
            // 获取品牌、包装、型号
            brand_freight() {
                this.$ajax('brand_freight', {
                    user_token: this.$getSync('token'),
            		line_id: this.product.line_id,//产品id
                    type_id:this.product.type_id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.select = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            }, 
            
            // 获取品牌、包装、型号
            insert_goods() {
				if(!this.product.name){
				    this.$toast('请输入产品名称');
				    return
				}
				if(!this.product.freight_id){
				    this.$toast('请选择运费模板');
				    return
				}
				
                if(this.product.freightType==2){
                    // if(!this.product.model){
                    //     this.$toast('请输入型号');
                    //     return
                    // }
                    
                    if(!this.product.weight){
                        this.$toast('请输入重量');
                        return
                    }
                }
				
                this.$ajax('insert_goods', {
                    user_token: this.$getSync('token'),
            		line_id: this.product.line_id,//产品id
                    type_id:this.product.type_id,
                    name:this.product.name,
                    brand_id:this.product.brand_id,
                    model:this.product.model,
                    packages:this.product.packages,
                    weight:this.product.weight,
                    freight_id:this.product.freight_id,
                }).then(ret => {
                    
                    if (ret.success == 1000) {
                        this.$alert('添加成功',()=>{
                            this.$backT()
                        })
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            }, 
            
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 20rpx;
	}
    .text{
        font-size: 28rpx;
        color: gray;
    }
	.box{
		background-color: #fff;
		padding: 0 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.item:last-child{
		border-bottom: none;
	}
    .item-right{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 15rpx;
    }
	.i-right{
		padding-left: 15rpx;
		flex: 1;
	}
	.inp{
		flex: 1;
		text-align: right;
        font-size: 28rpx;
	}
	
	.btn{
		font-size: 34rpx;
		color: #fff;
		padding: 25rpx;
		text-align: center;
		background-color: #00457f;
		border-radius: 50rpx;
		margin: 70rpx 0;
	}
	
	

</style>
